<template>
	<view>
		<!-- 购物车弹窗遮罩 -->
		<view
			v-if="flagShowCart"
			@tap="flagShowCart = false"
			style="position:fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 90; background-color: black; opacity: 0.4;"
		></view>
		<div v-if="flagShowCart" style="position:absolute; bottom:20rpx;z-index:100;width:750rpx; background-color:white;">
			<div style="max-height:1000rpx;  overflow-y: scroll;">
				<view v-for="(cartGoods, index) in cart" :key="index" :data-index="index" style="display: flex; padding: 15rpx; ">
					<image :src="cartGoods.image" style="width:150rpx; height:150rpx;margin:10rpx 15rpx;"></image>
					<view style="display:flex; flex-direction:column; justify-content:space-between;">
						<view>{{ cartGoods.name }}（库存{{ cartGoods.remainCount }}）</view>
						<view style="width:500rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
							<text style="background-color:#f4f4f4; padding:5rpx 15rpx; ">{{ cartGoods.propertyStr }}</text>
						</view>
						<view style="display:flex; justify-content:space-between; width:510rpx;">
							<view style="color:red">￥{{ Math.floor(cartGoods.price * cartGoods.count) / 100 }}</view>
							<view style="line-height:55rpx;">
								<span @tap="cartGoodsAddCount(index, -1)">-</span>
								<span style="margin:0 20rpx">{{ cartGoods.count }}</span>
								<span @tap="cartGoodsAddCount(index, 1)">+</span>
							</view>
						</view>
					</view>
				</view>
			</div>
			<div v-if="flagShowCart" style="height:90rpx;line-height:120rpx;;" @tap="flagShowCart = !flagShowCart">
				<button size="mini" type="warn" style="margin-left:20rpx;">关闭</button>
			</div>
		</div>
		<!-- 右下角的总价格和结算按钮 -->
		<div
			v-if="cart.length > 0"
			@tap="flagShowCart = !flagShowCart"
			style="position:absolute;bottom:20rpx;right:0;width:400rpx;z-index:110;background-color:white;display:flex; justify-content: flex-end; box-shadow: 0 0 30rpx #cfcfcf;padding:10rpx;"
		>
			<view style="margin-right:20rpx; line-height:65rpx;  ">
				总计:
				<text style="color:red">￥{{ totalPrice / 100 }}</text>
			</view>
			<view style="color:red; border:1px solid red; z-index:300; padding:10rpx 30rpx;" @tap="goToCreateOrder()">去结算</view>
		</div>
	</view>
</template>

<script>
import * as goodsApi from '@/api/goodsApi.js';
import { mapState, mapMutations } from 'vuex';
export default {
	name: 'cartComponent', // 购物车组件
	props: {
		shopInfo: Object
	},
	data() {
		return {
			flagShowCart: false,
			curCartGoodsIndex: 0 // 当前触摸的商品
		};
	},
	computed: {
		...mapState(['userInfo', 'cart']),
		totalPrice() {
			let total = 0;
			for (let i = 0; i < this.cart.length; i++) total += this.cart[i].price * this.cart[i].count;
			return total;
		}
	},
	methods: {
		...mapMutations(['addCartGoods']),
		// 添加商品数量
		cartGoodsAddCount(index, num) {
			if (num > 0 && this.cart[index].count >= this.cart[index].remainCount) return;
			this.cart[index].count += num;
			if (this.cart[index].count <= 0) {
				this.cart.splice(index, 1);
			}
			this.flagShowCart = this.cart.length > 0;
		},
		// 去结算（创建订单）
		goToCreateOrder() {
			if (this.cart.length == 0) {
				this.$msg('您还未选择任何商品');
				return;
			}
			if (!(this.userInfo && this.userInfo.id > 0)) {
				uni.navigateTo({
					url: '/pages/login'
				});
				return;
			}
			if (!this.userInfo.phone || !this.userInfo.address || !this.userInfo.name) {
				uni.showModal({
					content: '请先完善个人信息(手机，收货地址，姓名)',
					confirmText: '去完善',
					success(e) {
						if (e.confirm) {
							uni.navigateTo({
								url: '/pages/userCenter/userInfo'
							});
						}
					}
				});
				return;
			}

			uni.navigateTo({
				url: '/pages/order/createOrder'
			});
		}
	}
};
</script>

<style></style>
